<template>
	<div class="settings">
		<el-form :model="data">
			<el-form-item label="背景(整体):">
				<el-color-picker v-model="data.web.background" show-alpha :predefine="data.predefineColors" />
				<el-input v-model="data.web.background" class="rgbinput" placeholder="Please Input" />
			</el-form-item>
			<el-form-item label="背景(局部):">
				<el-color-picker v-model="data.web.Contentbackground" show-alpha :predefine="data.predefineColors" />
				<el-input v-model="data.web.background" class="rgbinput" placeholder="Please Input" />
			</el-form-item>
			<el-form-item label="默认文字颜色：">
				<el-color-picker v-model="data.web.color" show-alpha :predefine="data.predefineColors" />
				<el-input v-model="data.web.color" class="rgbinput" placeholder="Please Input" />
			</el-form-item>
		</el-form>
		<el-form :model="data" label-position="top">
			<el-form-item label="文本:">
				<div class="i18nradio">
					<el-radio-group v-model="radio">
						<el-radio-button label="zh" @click=";($i18n.locale = 'zh'), key++">简体中文</el-radio-button>
						<el-radio-button label="en" @click=";($i18n.locale = 'en'), key++">English</el-radio-button>
					</el-radio-group>
					<el-button type="danger" @click="add()">增加一行</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-scrollbar class="scrollbar" always height="500px">
			<el-form :model="data" v-for="(item, index) in data.web.content" :key="index">
				<el-form-item :label="`时间${index + 1}:`">
					<div class="title">
						<el-input v-model="data.web.content[index][$i18n.locale]['title']" placeholder="Please Input" />
						<el-button v-if="index == data.web.content.length - 1 && index != 0" @click="move(index)">删除</el-button>
					</div>
				</el-form-item>
				<el-form-item :label="`状态${index + 1}:`">
					<el-radio-group v-model="data.web.content[index]['status']" class="ml-4">
						<el-radio label="0" size="large">已完成</el-radio>
						<el-radio label="1" size="large">进行中</el-radio>
						<el-radio label="2" size="large">未来计划</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item :label="`内容${index + 1}:`">
					<Tiptap v-if="radio == 'zh'" :content="data.web.content[index][radio]['content']" :height="'100'" :editable="true"></Tiptap>
					<Tiptap v-if="radio == 'en'" :content="data.web.content[index][radio]['content']" :height="'100'" :editable="true" />
				</el-form-item>
				<el-divider border-style="dashed" />
			</el-form>
		</el-scrollbar>
	</div>
</template>
<script>
	// 这里要把index 和list 传给组件  组件修改时 实时传回
	// import Tiptap from '@/components/Tiptap.vue'
	import Tiptap from '@/components/Tiptap.vue'
	export default {
		components: {
			Tiptap,
		},
		props: ['data'],
		data() {
			return {
				radio: this.$i18n.locale,
				photo: false,
				key: 0,
				emptytextzh: {
					type: 'doc',
					content: [
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'left',
							},
							content: [
								{
									type: 'text',
									text: '简体中文',
								},
							],
						},
					],
				},
				emptytexten: {
					type: 'doc',
					content: [
						{
							type: 'paragraph',
							attrs: {
								textAlign: 'left',
							},
							content: [
								{
									type: 'text',
									text: 'English',
								},
							],
						},
					],
				},
			}
		},
		methods: {
			add() {
				let content = { status: '0', zh: { title: '标题', content: this.emptytextzh }, en: { title: 'title', content: this.emptytexten } }
				this.data.web.content.push(content)
			},
			move(index) {
				this.data.web.content.splice(index, 1)
			},
			senddata(content) {
				// this.data.web.content[this.radio] = content
			},
		},
		mounted() {
			// this.data.web['content']['zhongguo'] = '999'
			// this.data['ceshi'] = '新增的无需设置  直接在这里增加一个属性即可  拖拽页就没那么麻烦了'
		},
	}
</script>
<style scoped>
	.el-form-item {
		align-items: center;
		justify-content: center;
	}
	.title {
		width: 100%;
		display: flex;
		flex-direction: row;
		gap: 10px;
	}
	.scrollbar {
		border: 1px solid #c8c9cc;
		padding: 5px;
		border-radius: 4px;
	}
	.settings .rgbinput {
		width: 150px;
		margin-left: 10px;
	}

	.i18nradio {
		width: 100%;
		margin-bottom: 10px;
		display: flex;
		gap: 10px;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>
<style>
	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar {
		width: 7px;
		height: 7px;
	}

	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar-track {
		background-color: rgba(255, 255, 255, 0.5); /* 通过 rgba() 函数设置带有透明度的背景颜色 */
	}

	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar-thumb {
		background-color: rgba(144, 147, 153, 0.3);
		border-radius: 5px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	}

	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar-thumb:hover {
		background-color: rgba(144, 147, 153, 0.3);
	}

	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar-thumb:active {
		background-color: rgba(144, 147, 153, 0.3);
	}

	.custom-scrollbar-element .el-textarea__inner::-webkit-scrollbar-corner {
		background-color: #ffffff;
	}
</style>
